<template>

  <div>

    <div class="div1">
      <span class="span2">统计时间：{{currentTime}} （根据单品昨日与上周同日的差值进行排行；如果昨天是周一，跟上周一计算差值）</span>
    </div>

    <div>
      <el-row>

          <div style="margin-bottom: 20px">
            <div class="ranking_top_box">
                <span class="big_title_style" style="margin-left: 10px; font-size: 18px">访客榜Top10</span>
                <el-button-group>
                  <el-button size="mini" :class="visitorButton ? 'button-sku-blue':''" @click="ranking(1)" :plain="autofocus">涨幅榜</el-button>
                  <el-button size="mini" :class="!visitorButton ? 'button-sku-blue':''" @click="ranking(2)">跌幅榜</el-button>
              </el-button-group>
            </div>
          </div>




          <el-table v-loading="loading" :data="productData" border >
            <el-table-column  label="商品图片"
                              align="center"
                              :show-overflow-tooltip="true"
                              prop="carouselImg"
                              width="110px"
            >
              <template slot-scope="scope">
                <el-image v-if="scope.row.carouselImg != null && scope.row.carouselImg != '' " slot="reference"
                          :src="scope.row.carouselImg"
                          class="image-rows" style="width: 80px; height: 80px;" :preview-src-list="[scope.row.carouselImg]"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" align="productName" prop="productName"/>
            <el-table-column label="商品访客数" align="visitorsSum" prop="visitorsSum"/>
            <el-table-column align="increase" prop="increase" label="较上周同日">
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="3">
                    <div>{{ scope.row.increase }}</div>
                  </el-col>
                  <el-col :span="3">
                    <div>
                      <img v-if="productType == 1" src="@/assets/images/up.svg" alt="light">
                      <img v-if="productType == 2" src="@/assets/images/decline.svg" alt="light">
                    </div>
                  </el-col>

                </el-row>
              </template>

            </el-table-column>
          </el-table>

        </el-row>

<!--        <el-row style="margin-top: 30px;">-->
<!--          <div style="margin-bottom: 20px">-->
<!--            <div class="ranking_top_box">-->
<!--                <span class="big_title_style" style="margin-left: 10px; font-size: 18px">支付榜Top10</span>-->
<!--                <el-button-group>-->
<!--                  <el-button size="mini"  :class="orderButton ? 'button-sku-blue':''" @click="rankingOrder(1)" >涨幅榜</el-button>-->
<!--                  <el-button size="mini" :class="!orderButton ? 'button-sku-blue':''" @click="rankingOrder(2)">跌幅榜</el-button>-->
<!--                </el-button-group>-->
<!--      -->
<!--            </div>-->
<!--          </div>-->

<!--          <el-table :data="orderData" border style="width: 100%">-->
<!--            <el-table-column prop="carouselImg" label="商品图片" width="110">-->
<!--              <template slot-scope="scope">-->
<!--                <el-image v-if="scope.row.carouselImg != null && scope.row.carouselImg != '' " slot="reference"-->
<!--                          :src="scope.row.carouselImg"-->
<!--                          class="image-rows" style="width: 80px; height: 80px;" :preview-src-list="[scope.row.carouselImg]"></el-image>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="date" label="商品名称" min-width="300"></el-table-column>-->
<!--            <el-table-column prop="name" label="支付金额"></el-table-column>-->
<!--            <el-table-column prop="address" label="较上周同日"></el-table-column>-->
<!--          </el-table>-->
<!--        &lt;!&ndash; </el-col> &ndash;&gt;-->

<!--      </el-row>-->
    </div>


  </div>
</template>


<script>
  import productNewestData from '@/views/dataCentre/productDataDetail/productSituation/productNewestData';
  import productNewestMap from '@/views/dataCentre/productDataDetail/productSituation/productNewestMap';
  import {
    getRanking
  } from "@/api/dataCentre/productCount";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {productNewestData, productNewestMap},
    props: {},
    data() {
      //这里存数据
      return {
        //商品排行榜按钮
        visitorButton : true,
        //订单排行榜按钮
        orderButton:true,
        autofocus:true,
        // 遮罩层
        loading: true,
        //未指定日期查全部数据
        allData: true,
        //结束日期
        endTime: '',
        //开始日期
        startTime: '',
        //当前时间
        currentTime: '',
        // 商品类别
        categoryOptions: [],
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {},
        //周同比商品数据
        productData:[],
        //订单周同比
        orderData:[],
        //商品上升、下降
        productType: 0 ,
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      refresh() {
        const date = new Date();
        date.setTime(date.getTime()-24*60*60*1000);
        this.currentTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        this.allData = true
      },
      ranking(type){
        if (type == 1){
          this.visitorButton = true
        }else {
          this.visitorButton = false
        }

        this.productType = type
        this.loading = true;
        getRanking(10,type).then(response=>{
          this.productData = response.rows
          this.loading = false
        })

      },
      rankingOrder(type){
        if (type == 1){
          this.orderButton = true
        }else {
          this.orderButton = false
        }
      }
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.refresh()
      this.ranking(1)
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>

  .div1 {
    display: flex;
    align-content: center;
    margin: 20px 0;
  }
  .ranking_top_box {
    display: flex;
    align-content: center;
    justify-content: space-between;
  }

  .first-title__title {
    font-size: 20px;
    font-weight: 500;
    color: #323234;
    margin-bottom: 30px;
  }

  .span1 {
    font-size: 16px;
    font: 600;
    margin-right: 10px;

  }

  .span2 {
    border: 1px;
    font-size: 14px;
    color: #606266;
  }
  .button-sku-blue {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
</style>
